<!-- front/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鲜时蔬</title>
    <!-- 引入 dayjs -->
    <script src="../../js/dayjs.min.js"></script>
    <!-- 核心依赖 -->
    <!-- 引入Vue.js -->
    <script src="../../js/vue.js"></script>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="../../css/index.css">
    <!-- 引入Element UI组件库 -->
    <script src="../../js/index.js"></script>
    <!-- 引入axios -->
    <script src="../../js/axios.min.js"></script>
    <!-- 基础样式 -->
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #f5f5f5; color: #333; }
        .container { width: 1140px; margin: 0 auto; padding: 0 15px; }
        @media (max-width: 1199px) { .container { width: 960px; } }
        @media (max-width: 991px) { .container { width: 720px; } }
        @media (max-width: 767px) { .container { width: 100%; } }

        /* 导航栏 */
        .header { background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
        .header-content { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
        .logo { display: flex; align-items: center; font-size: 20px; font-weight: bold; color: #27ae60; text-decoration: none; }
        .logo i { margin-right: 8px; }
        .nav { display: flex; }
        .nav a { margin: 0 15px; text-decoration: none; color: #666; font-size: 14px; padding: 5px 0; }
        .nav a.active { color: #27ae60; border-bottom: 2px solid #27ae60; }
        .user-actions { display: flex; align-items: center; position: relative; }
        .user-actions button { margin-left: 15px; background: none; border: none; color: #666; cursor: pointer; font-size: 14px; display: flex; align-items: center; }
        .user-actions button i { margin-right: 5px; }

        /* 用户信息下拉菜单 */
        .user-info { position: relative; display: flex; align-items: center; cursor: pointer; }
        .user-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: #27ae60; color: white; display: flex; align-items: center; justify-content: center; margin-right: 8px; font-size: 14px; }
        .user-dropdown { position: absolute; top: 100%; right: 0; background: white; box-shadow: 0 2px 12px rgba(0,0,0,0.1); border-radius: 4px; padding: 5px 0; min-width: 120px; z-index: 10; margin-top: 5px; display: none; }
        .user-dropdown.show { display: block; }
        .user-dropdown-item { padding: 8px 15px; font-size: 14px; color: #606266; cursor: pointer; }
        .user-dropdown-item:hover { background-color: #f5f7fa; color: #27ae60; }

        /* 主内容区 */
        .main { padding-top: 80px; padding-bottom: 50px; }

        /* 轮播图 */
        .carousel { margin-bottom: 40px; }
        .el-carousel__item img { width: 100%; height: 400px; object-fit: cover; }
        @media (max-width: 767px) { .el-carousel__item img { height: 250px; } }

        /* 模块通用样式 */
        .section { margin-bottom: 50px; }
        .section-title { text-align: center; margin-bottom: 30px; }
        .section-title h2 { font-size: 24px; color: #333; display: inline-block; padding-bottom: 10px; border-bottom: 2px solid #27ae60; }

        /* 商品展示 */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .product-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            overflow: hidden;
            transition: all 0.3s ease;
            height: 350px;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.15);
        }

        .product-image-container {
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f8f9fa;
            overflow: hidden;
        }

        .product-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
        }

        .product-info {
            padding: 15px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .product-name {
            font-size: 16px;
            font-weight: 500;
            margin: 0 0 10px 0;
            color: #333;
            height: 40px;
            overflow: hidden;
        }

        .product-price {
            font-size: 18px;
            color: #e74c3c;
            font-weight: bold;
            margin: 5px 0;
        }

        .product-shop {
            font-size: 12px;
            color: #666;
            margin: 5px 0;
        }

        .add-to-cart-section {
            padding: 0 15px 15px 15px;
            margin-top: auto;
        }

        .quantity-control {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            justify-content: center;
        }

        .quantity-btn {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            width: 30px;
            height: 30px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .quantity-input {
            width: 50px;
            text-align: center;
            border: 1px solid #ddd;
            height: 30px;
            margin: 0 5px;
        }

        .add-to-cart-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px;
            width: 100%;
            cursor: pointer;
            font-size: 14px;
        }

        .add-to-cart-btn:hover {
            background-color: #c0392b;
        }

        .no-products {
            text-align: center;
            color: #999;
            font-size: 16px;
            padding: 50px;
            grid-column: 1 / -1;
        }

        /* 促销模块 */
        .promotion { background: #fff; padding: 30px; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
        .promotion-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .promotion-title { font-size: 18px; color: #e53935; }
        .countdown { color: #e53935; font-weight: bold; }
        .promotion-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }

        /* 优惠券模块 */
        .coupon-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 20px; }
        .coupon-card { width: 300px; background: linear-gradient(135deg, #27ae60, #219653); color: #fff; border-radius: 8px; padding: 20px; position: relative; overflow: hidden; }
        .coupon-card::after { content: ''; position: absolute; top: 0; right: 0; width: 60px; height: 60px; background: rgba(255,255,255,0.1); border-radius: 0 0 0 50%; }
        .coupon-value { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
        .coupon-desc { font-size: 12px; margin-bottom: 15px; opacity: 0.9; }
        .coupon-time { font-size: 12px; margin-bottom: 15px; opacity: 0.9; }

        /* 页脚 */
        .footer { background: #333; color: #fff; padding: 30px 0; margin-top: 50px; }
        .footer-content { text-align: center; font-size: 14px; }

        /* 回到顶部 */
        .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 40px; height: 40px; border-radius: 50%; background: #27ae60; color: #fff; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 999; }
        .back-to-top.show { display: flex; }

        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 50px;
        }

   /** 商品详情弹窗 */
        /* 商品详情对话框样式优化 */
        .custom-product-dialog .el-dialog__body {
            padding: 0 !important;
            overflow: visible;
        }

        .detail-loading-wrapper {
            padding: 20px;
        }

        .product-detail-container {
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 25px;
            padding: 10px;
            background: linear-gradient(180deg, #fdfdfd, #f7f9fa);
        }

        /* 商品图片区域 */
        .detail-gallery {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.06);
            transition: transform 0.3s ease;
        }

        .detail-gallery:hover {
            transform: translateY(-6px);
        }

        .main-image {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 8px;
            background: #f9f9f9;
        }

        .zoom-image {
            max-width: 100%;
            max-height: 400px;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .zoom-image:hover {
            transform: scale(1.03);
        }

        /* 商品信息区域 */
        .detail-info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 10px 10px 10px 10px;
        }

        .product-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #2c3e50;
            line-height: 1.4;
        }

        .price-section {
            margin-bottom: 18px;
        }

        .current-price {
            font-size: 32px;
            color: #e74c3c;
            font-weight: bold;
            margin-right: 12px;
        }

        .market-price {
            font-size: 16px;
            color: #95a5a6;
            text-decoration: line-through;
        }

        .product-meta {
            margin-bottom: 20px;
            font-size: 14px;
        }

        .meta-item {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            color: #555;
        }

        .meta-label {
            color: #777;
            margin-right: 6px;
        }

        .meta-value {
            color: #333;
        }

        .quantity-control {
            margin-bottom: 22px;
            display: flex;
            align-items: center;
        }

        .quantity-label {
            margin-right: 12px;
            color: #555;
            font-weight: 500;
        }

        .quantity-btn {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.25s ease;
            font-size: 16px;
        }

        .quantity-btn:hover {
            background: #e9ecef;
            border-color: #dcdfe6;
        }

        .quantity-input {
            width: 70px;
            height: 36px;
            margin: 0 10px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            text-align: center;
            transition: border-color 0.25s ease;
        }

        .quantity-input:focus {
            outline: none;
            border-color: #27ae60;
        }

        .action-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .add-cart-btn, .buy-now-btn {
            height: 46px;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.25s ease;
        }

        .add-cart-btn:hover, .buy-now-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.1);
        }

        /* 标签页样式 */
        .detail-tabs {
            padding: 0 20px 20px;
        }

        .custom-tabs .el-tabs__header {
            margin: 0 20px 10px !important;
            border-bottom: 1px solid #e9ecef;
        }

        .custom-tabs .el-tabs__nav {
            height: 46px;
        }

        .el-tab-pane {
            padding: 15px 0;
        }

        /* 商品描述 */
        .product-description {
            line-height: 1.8;
            color: #444;
            font-size: 15px;
        }

        .desc-title {
            margin: 20px 0 10px;
            color: #2c3e50;
            font-size: 18px;
            font-weight: 600;
        }

        .desc-content {
            margin-bottom: 15px;
        }

        /* 商品属性 */
        .product-attributes {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 10px;
        }

        .product-attributes li {
            padding: 10px 0;
            border-bottom: 1px dashed #eee;
            display: flex;
            align-items: flex-start;
        }

        .attr-label {
            width: 95px;
            color: #777;
            font-weight: 500;
        }

        .attr-value {
            color: #333;
            flex: 1;
        }

        /* 规格参数 */
        .product-specs {
            padding: 10px 0;
        }

        .spec-title {
            margin-bottom: 12px;
            color: #2c3e50;
            font-weight: 600;
            font-size: 18px;
        }

        .no-spec {
            color: #999;
            padding: 10px 0;
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .product-detail-container {
                grid-template-columns: 1fr;
            }

            .zoom-image {
                max-height: 320px;
            }

            .action-buttons {
                grid-template-columns: 1fr;
            }

            .product-attributes {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .product-title {
                font-size: 20px;
            }

            .current-price {
                font-size: 28px;
            }

            .detail-gallery {
                padding: 12px;
            }
        }

    /* 动态信息样式 */
    .dynamic-info {
        position: relative;
        margin-left: 20px;
    }

    .dynamic-badge {
        line-height: 1;
    }

    .dynamic-button {
        color: #606266;
        font-size: 14px;
        padding: 8px 12px;
        transition: all 0.3s;
    }

    .dynamic-button:hover {
        color: #27ae60;
        background-color: #f0f9ff;
    }

    .dynamic-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        background: white;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        border-radius: 8px;
        width: 350px;
        z-index: 100;
        margin-top: 10px;
        overflow: hidden;
    }

    .dynamic-header {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(135deg, #27ae60, #219653);
        color: white;
    }

    .dynamic-title {
        font-weight: 600;
        font-size: 16px;
    }

    .dynamic-content {
        max-height: 400px;
        overflow-y: auto;
    }

    .dynamic-list {
        padding: 0;
    }

    .dynamic-item {
        display: flex;
        align-items: flex-start;
        padding: 15px 20px;
        border-bottom: 1px solid #f5f7fa;
        cursor: pointer;
        transition: all 0.3s;
        position: relative;
    }

    .dynamic-item:hover {
        background-color: #f5f7fa;
    }

    .dynamic-item.unread {
        background-color: #f0f9ff;
    }

    .dynamic-item-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #27ae60, #219653);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .dynamic-item-avatar i {
        color: white;
        font-size: 18px;
    }

    .dynamic-item-content {
        flex: 1;
        min-width: 0;
    }

    .dynamic-item-title {
        font-weight: 500;
        color: #303133;
        margin-bottom: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dynamic-item-desc {
        color: #606266;
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dynamic-item-time {
        color: #909399;
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .dynamic-item-time i {
        margin-right: 4px;
    }

    .unread-dot {
        position: absolute;
        top: 18px;
        right: 20px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #f56c6c;
    }

    .no-dynamic {
        padding: 40px 20px;
        text-align: center;
        color: #909399;
    }

    .no-dynamic p {
        margin-top: 10px;
        font-size: 14px;
    }

    .dynamic-footer {
        padding: 12px 20px;
        text-align: center;
        border-top: 1px solid #f0f0f0;
        background-color: #fafafa;
    }

    /* 添加动画效果 */
    .dynamic-item {
        animation: slideInRight 0.3s ease-out;
    }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* 滚动条美化 */
    .dynamic-content::-webkit-scrollbar {
        width: 6px;
    }

    .dynamic-content::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .dynamic-content::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

    .dynamic-content::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
    </style>
</head>
<body>
<div id="app">
    <!-- 导航栏 -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <a href="index.html" class="logo">
                    <i class="el-icon-shopping-bag"></i>
                    <span>鲜时蔬</span>
                </a>
                <nav class="nav">
                    <a href="index.html" class="active">首页</a>
                    <a href="vegetables.html">蔬菜列表</a>
                    <a href="contact.html">联系我们</a>
                </nav>
                <div class="user-actions">
                    <!-- 动态信息按钮 -->
                    <div class="dynamic-info"
                         @mouseenter="showDynamicDropdown = true"
                         @mouseleave="showDynamicDropdown = false">
                        <el-badge :value="unreadCount > 99 ? '99+' : unreadCount"
                                  :hidden="unreadCount === 0"
                                  class="dynamic-badge">
                            <el-button type="text"
                                       icon="el-icon-bell"
                                       class="dynamic-button">
                                动态
                            </el-button>
                        </el-badge>

                        <el-collapse-transition>
                            <div class="dynamic-dropdown" v-show="showDynamicDropdown">
                                <div class="dynamic-header">
                                    <span class="dynamic-title">最新动态</span>
                                    <el-button type="text"
                                               size="mini"
                                               @click="markAllAsRead"
                                               v-if="unreadCount > 0">
                                        全部已读
                                    </el-button>
                                </div>

                                <div class="dynamic-content">
                                    <div v-if="dynamicList.length > 0" class="dynamic-list">
                                        <div class="dynamic-item"
                                             v-for="(item, index) in dynamicList"
                                             :key="index"
                                             :class="{ 'unread': !item.read }"
                                             @click="viewDynamic(item)">
                                            <div class="dynamic-item-avatar">
                                                <i class="el-icon-message"></i>
                                            </div>
                                            <div class="dynamic-item-content">
                                                <div class="dynamic-item-title">{{ item.noticeTitle }}</div>
                                                <div class="dynamic-item-desc">{{ item.noticeContent }}</div>
                                                <div class="dynamic-item-time">
                                                    <i class="el-icon-time"></i>
                                                    {{ formatTime(item.createTime) }}
                                                </div>
                                            </div>
                                            <div class="unread-dot" v-if="!item.read"></div>
                                        </div>
                                    </div>

                                    <div v-else class="no-dynamic">
                                        <i class="el-icon-chat-line-round" style="font-size: 48px; color: #dcdfe6;"></i>
                                        <p>暂无动态</p>
                                    </div>
                                </div>

                                <div class="dynamic-footer">
                                    <el-button type="text"
                                               icon="el-icon-arrow-right"
                                               @click="goToAllDynamic">
                                        查看全部
                                    </el-button>
                                </div>
                            </div>
                        </el-collapse-transition>
                    </div>
                    <!-- 根据登录状态显示不同内容 -->
                    <template v-if="isLoggedIn">
                        <div class="user-info" @mouseenter="showDropdown = true" @mouseleave="showDropdown = false">
                            <div class="user-avatar">
                                {{ userInfo.nickName ? userInfo.nickName.charAt(0) : userInfo.userName.charAt(0) }}
                            </div>
                            <span>{{ userInfo.nickName || userInfo.userName }}</span>
                            <div class="user-dropdown" :class="{ 'show': showDropdown }">
                                <div class="user-dropdown-item" @click="goToPersonalCenter">个人中心</div>
                                <div class="user-dropdown-item" @click="logout">退出登录</div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <button @click="goToLogin">
                            <i class="el-icon-user"></i> 登录
                        </button>
                    </template>
                    <button @click="goToCart">
                        <i class="el-icon-shopping-cart"></i> 购物车({{ cartCount }})
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="main">
        <div class="container">
            <!-- 轮播图 -->
            <div class="carousel">
                <el-carousel height="400px" indicator-position="outside">
                    <el-carousel-item v-for="(item, index) in carouselList" :key="index">
                        <img :src="item.imgUrl" :alt="item.title">
                    </el-carousel-item>
                </el-carousel>
            </div>

            <!-- 热门商品 -->
            <section class="section">
                <div class="section-title">
                    <h2>热门商品</h2>
                </div>
                <div v-if="loading" class="loading">
                    <el-spinner style="margin: 50px auto;"></el-spinner>
                    <p>正在加载商品数据...</p>
                </div>
                <div v-else>
                    <div class="product-grid">
                        <div v-if="products.length === 0" class="no-products">
                            <p>暂无商品信息</p>
                        </div>
                        <div v-for="product in products" :key="product.productId" class="product-card">
                            <div class="product-image-container">
                                <img
                                        :src="product.imageUrl || '/static/images/no-image.png'"
                                        :alt="product.productName"
                                        class="product-image"
                                        @error="handleImageError($event)">
                            </div>
                            <div class="product-info">
                                <h5 class="product-name">{{ product.productName }}</h5>
                                <p class="product-price">¥{{ product.price || '0.00' }}</p>
                                <!--<p class="product-shop">
                                    <i class="el-icon-shop"></i>
                                    {{ product.shopName || '暂无店铺信息' }}
                                </p>-->
                            </div>
                            <!--                            <div class="add-to-cart-section">-->
                            <!--                                <div class="quantity-control">-->
                            <!--                                    <button class="quantity-btn" @click="decreaseQuantity(product)">-</button>-->
                            <!--                                    <input-->
                            <!--                                            type="number"-->
                            <!--                                            class="quantity-input"-->
                            <!--                                            v-model.number="product.quantity"-->
                            <!--                                            min="1">-->
                            <!--                                    <button class="quantity-btn" @click="increaseQuantity(product)">+</button>-->
                            <!--                                </div>-->
                            <!--                                <button class="add-to-cart-btn" @click="addToCart(product)">-->
                            <!--                                    <i class="el-icon-shopping-cart-1"></i> 加入购物车-->
                            <!--                                </button>-->
                            <!--                            </div>-->
                            <!-- 修改商品卡片中的操作按钮 -->
                            <div class="add-to-cart-section">
                                <div class="quantity-control">
                                    <button class="quantity-btn" @click="decreaseQuantity(product)">-</button>
                                    <input
                                            type="number"
                                            class="quantity-input"
                                            v-model.number="product.quantity"
                                            min="1">
                                    <button class="quantity-btn" @click="increaseQuantity(product)">+</button>
                                </div>
                                <button class="add-to-cart-btn" @click="addToCart(product)" style="margin-bottom: 5px;">
                                    <i class="el-icon-shopping-cart-1"></i> 加入购物车
                                </button>
                                <button class="add-to-cart-btn" @click="viewProductDetail(product.productId)"
                                        style="background-color: #6c757d; margin-top: 5px;">
                                    <i class="el-icon-view"></i> 查看详情
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
                <div style="text-align: center; margin-top: 20px;">
                    <el-button type="default" @click="goToVegetables">查看更多商品</el-button>
                </div>
            </section>
        </div>


        <!-- 在 index.html 中添加商品详情对话框 -->
        <!-- 在 </main> 前添加 -->
        <!-- 商品详情对话框 -->
        <el-dialog
                :title="productDialogTitle"
                :visible.sync="productDialogVisible"
                width="900px"
                max-width="95%"
                custom-class="custom-product-dialog"
                :append-to-body="true">

            <div v-loading="productDetailLoading" class="detail-loading-wrapper">
                <div v-if="currentProduct" class="product-detail-container">
                    <!-- 商品图片 -->
                    <div class="detail-gallery">
                        <div class="main-image">
                            <img
                                    :src="currentProduct.imageUrl || '/static/images/no-image.png'"
                                    :alt="currentProduct.productName"
                                    class="zoom-image"
                                    @error="handleImageError($event)">
                        </div>
                    </div>

                    <!-- 商品信息 -->
                    <div class="detail-info">

                        <h3 class="product-title">
                            <span class="meta-label">商品名称：</span>
                            {{ currentProduct.productName }}</h3>

                        <div class="price-section">
                            <span class="meta-label">单价：</span>
                            <span class="current-price">¥{{ currentProduct.price || '0.00' }}</span>
                            <span class="market-price" v-if="currentProduct.marketPrice">¥{{ currentProduct.marketPrice }}</span>
                        </div>

                        <div class="product-meta">
                            <div class="meta-item" v-if="currentProduct.shop">
                                <i class="el-icon-shop"></i>
                                <span class="meta-label">店铺：</span>
                                <span class="meta-value">{{ currentProduct.shop.shopName || '暂无店铺信息' }}</span>
                            </div>
                        </div>

                        <div class="quantity-control">
                            <span class="quantity-label">数量：</span>
                            <button class="quantity-btn" @click="decreaseDetailQuantity">-</button>
                            <input type="number" class="quantity-input" v-model.number="detailQuantity" min="1">
                            <button class="quantity-btn" @click="increaseDetailQuantity">+</button>
                        </div>

                        <div class="action-buttons">
                            <el-button type="primary" size="medium" class="add-cart-btn" @click="addToCartFromDetail">
                                <i class="el-icon-shopping-cart-2"></i> 加入购物车
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 商品详情标签页 -->
            <div class="detail-tabs" v-if="currentProduct">
                <el-tabs v-model="activeTab" type="border-card" class="custom-tabs">
                    <el-tab-pane label="商品详情" name="detail">
                        <div class="product-description">
                            <h4 class="desc-title">商品描述</h4>
                            <p class="desc-content">{{ currentProduct.description || '暂无描述' }}</p>

                            <h4 class="desc-title">商品信息</h4>
                            <ul class="product-attributes">
                                <li v-if="currentProduct.category">
                                    <span class="attr-label">分类：</span>
                                    <span class="attr-value">{{ currentProduct.category.categoryName }}</span>
                                </li>
                                <li v-if="currentProduct.unit">
                                    <span class="attr-label">单位：</span>
                                    <span class="attr-value">{{ currentProduct.unit.unitName }}</span>
                                </li>
                                <li v-if="currentProduct.brand">
                                    <span class="attr-label">品牌：</span>
                                    <span class="attr-value">{{ currentProduct.brand.brandName }}</span>
                                </li>
                                <li v-if="currentProduct.variety">
                                    <span class="attr-label">品种：</span>
                                    <span class="attr-value">{{ currentProduct.variety.varietyName }}</span>
                                </li>
                                <li v-if="currentProduct.origin">
                                    <span class="attr-label">产地：</span>
                                    <span class="attr-value">{{ currentProduct.origin.originName }}</span>
                                </li>
                                <li v-if="currentProduct.grade">
                                    <span class="attr-label">等级：</span>
                                    <span class="attr-value">{{ currentProduct.grade.gradeName }}</span>
                                </li>
                                <li v-if="currentProduct.cold">
                                    <span class="attr-label">冷藏方式：</span>
                                    <span class="attr-value">{{ currentProduct.cold.coldName }}</span>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="规格参数" name="spec">
                        <div class="product-specs">
                            <div v-if="currentProduct.specJson">
                                <h4 class="spec-title">规格信息</h4>
                                <div v-html="formatSpecJson(currentProduct.specJson)"></div>
                            </div>
                            <div v-else>
                                <p class="no-spec">暂无规格信息</p>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <p>© 2025 鲜时蔬 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部 -->
    <button class="back-to-top" :class="{ 'show': scrollY > 500 }" @click="scrollToTop">
        <i class="el-icon-arrow-up"></i>
    </button>
</div>

<!-- Vue 逻辑 -->
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                scrollY: 0,
                cartCount: 0,
                showDropdown: false, // 控制下拉菜单显示
                isLoggedIn: false,   // 登录状态
                userInfo: {},        // 用户信息
                loading: true,       // 商品加载状态
                products: [],        // 商品列表


                // 商品详情相关
                productDialogVisible: false,
                productDialogTitle: '商品详情',
                productDetailLoading: false,
                currentProduct: null,
                detailQuantity: 1,
                activeTab: 'detail',


                dynamicList: [], // 动态列表
                unreadCount: 0, // 未读消息数量
                showDynamicDropdown: false,
                // 轮播图数据
                carouselList: [
                    { imgUrl: "https://vegetablemarketexpress.oss-cn-beijing.aliyuncs.com/lunbotu/images/lunbotu1.jpg", title: "新鲜蔬菜直达" },
                    { imgUrl: "https://vegetablemarketexpress.oss-cn-beijing.aliyuncs.com/lunbotu/images/lunbotu2.jpg", title: "有机蔬菜特惠" },
                    { imgUrl: "https://vegetablemarketexpress.oss-cn-beijing.aliyuncs.com/lunbotu/images/lunbotu3.jpg", title: "产地直供新鲜" }
                ],

                // 促销商品（模拟）
                promotionItems: [
                    { id: 5, name: "菠菜", promotionPrice: 1.59, originalPrice: 2.99, imgUrl: "https://picsum.photos/id/106/220/160", quantity: 1 },
                    { id: 6, name: "西兰花", promotionPrice: 4.99, originalPrice: 6.99, imgUrl: "https://picsum.photos/id/107/220/160", quantity: 1 }
                ],

                // 优惠券（模拟）
                couponList: [
                    { id: 1, value: 10, desc: "满50元可用", endTime: "2025-12-31", received: false },
                    { id: 2, value: 20, desc: "满100元可用", endTime: "2025-12-31", received: true },
                    { id: 3, value: 5, desc: "无门槛使用", endTime: "2025-12-31", received: false }
                ],

                // 倒计时（模拟2小时后结束）
                countdownTime: 2 * 60 * 60 * 1000
            }
        },
        mounted() {
            window.addEventListener('scroll', () => this.scrollY = window.scrollY);
            this.checkLoginStatus();
            this.loadProducts(); // 加载商品数据
            this.updateCountdown(); // 启动倒计时
            this.loadDynamicData(); // 加载动态数据
            this.getCartCount(); // 初始化购物车数量
        },
        beforeDestroy() {
            window.removeEventListener('scroll', () => this.scrollY = window.scrollY);
        },
        computed: {
            formatCountdownTime() {
                const hours = Math.floor(this.countdownTime / (1000 * 60 * 60));
                const minutes = Math.floor((this.countdownTime % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((this.countdownTime % (1000 * 60)) / 1000);

                return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }
        },
        methods: {
            // 加载商品数据
            // 加载商品数据
            loadProducts() {
                this.loading = true;
                // 使用 POST 请求并发送请求体
                axios.post('/vegetablemarketexpress/product/selectProductList', {
                    "pageNo": 1,
                    "pageSize": 100,
                    "data": {
                        "status": "0"  // 只查询正常状态的商品
                    }
                })
                    .then(response => {
                        if (response.data && response.data.code === 200) {
                            // 根据实际返回的数据结构调整
                            if (response.data.data && response.data.data.list) {
                                this.products = response.data.data.list;
                            } else {
                                this.products = response.data.data || [];
                            }
                            // 为每个商品初始化数量
                            this.products.forEach(product => {
                                this.$set(product, 'quantity', 1);
                            });
                        } else {
                            const errorMsg = (response.data && response.data.msg) || '未知错误';
                            this.$message.error('加载商品数据失败: ' + errorMsg);
                        }
                    })
                    .catch(error => {
                        console.error('加载商品数据失败:', error);
                        this.$message.error('网络错误，加载商品数据失败');
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },

            // 增加商品数量
            increaseQuantity(product) {
                if (!product.quantity) {
                    this.$set(product, 'quantity', 1);
                } else {
                    product.quantity++;
                }
            },

            // 减少商品数量
            decreaseQuantity(product) {
                if (!product.quantity) {
                    this.$set(product, 'quantity', 1);
                } else if (product.quantity > 1) {
                    product.quantity--;
                }
            },

            // 增加促销商品数量
            increasePromotionQuantity(item) {
                if (!item.quantity) {
                    this.$set(item, 'quantity', 1);
                } else {
                    item.quantity++;
                }
            },

            // 减少促销商品数量
            decreasePromotionQuantity(item) {
                if (!item.quantity) {
                    this.$set(item, 'quantity', 1);
                } else if (item.quantity > 1) {
                    item.quantity--;
                }
            },

            // 处理图片加载错误
            handleImageError(event) {
                event.target.src = '/static/images/no-image.png';
            },

            loadDynamicData() {
                // 构建查询参数
                const params = {
                    pageNo: 1,
                    pageSize: 5, // 只显示最新5条
                    data: {
                        status: '0' // 只查询已发布的公告
                    }
                };

                axios.post('/vegetablemarketexpress/notice/queryByPage', params)
                    .then(response => {
                        if (response.data.code === 200) {
                            this.dynamicList = response.data.data.list || [];
                            // 检查已读状态
                            this.dynamicList.forEach(item => {
                                // 检查本地存储中是否有已读标记
                                item.read = !!localStorage.getItem('notice_read_' + item.noticeId);
                            });
                            // 计算未读数量（这里简单处理，实际应根据用户已读状态）
                            this.unreadCount = this.dynamicList.filter(item => !item.read).length;
                        } else {
                            console.error('获取动态数据失败:', response.data.message);
                        }
                    })
                    .catch(error => {
                        console.error('获取动态数据异常:', error);
                    });
            },

            formatTime(time) {
                if (!time) return '';
                return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
            },

            // 查看动态详情
            viewDynamic(item) {
                if (!item.read) {
                    // 标记为已读
                    item.read = true;
                    // 保存到本地存储
                    localStorage.setItem('notice_read_' + item.noticeId, '1');
                    // 更新未读计数
                    this.unreadCount = this.dynamicList.filter(item => !item.read).length;

                    // 添加点击动画
                    const element = event.currentTarget;
                    element.style.transform = 'scale(0.98)';
                    setTimeout(() => {
                        element.style.transform = 'scale(1)';
                    }, 100);
                }

                this.$notify({
                    title: item.noticeTitle,
                    message: item.noticeContent,
                    duration: 5000,
                    offset: 60,
                    customClass: 'dynamic-detail-notification'
                });
            },

            // 标记全部已读
            markAllAsRead() {
                this.$confirm('确定要标记所有动态为已读吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    this.dynamicList.forEach(item => {
                        if (!item.read) {
                            item.read = true;
                            // 保存到本地存储
                            localStorage.setItem('notice_read_' + item.noticeId, '1');
                        }
                    });
                    this.unreadCount = 0;
                    this.$message.success('已标记全部已读');
                }).catch(() => {});
            },
            // 查看全部动态
            goToAllDynamic() {
                this.$message.info('跳转到全部动态页面');
                window.location.href = '/vegetablemarketexpress/html/front/notice.html'; // 假设有公告列表页面
            },
            // 检查登录状态
            checkLoginStatus() {
                axios.get('/vegetablemarketexpress/user/checkLoginStatus', {withCredentials: true})
                    .then(response => {
                        if (response.data.code === 200 && response.data.data) {
                            this.isLoggedIn = true;
                            this.userInfo = response.data.data;
                        } else {
                            this.isLoggedIn = false;
                            this.userInfo = {};
                        }
                    })
                    .catch(error => {
                        console.error('检查登录状态失败:', error);
                        this.isLoggedIn = false;
                    });
            },

            // 添加倒计时更新方法
            updateCountdown() {
                if (this.countdownTime > 0) {
                    setTimeout(() => {
                        this.countdownTime -= 1000;
                        this.updateCountdown();
                    }, 1000);
                }
            },

            // 跳转到个人中心
            goToPersonalCenter() {
                this.$message.info('即将跳转到个人中心');
                window.location.href = '/vegetablemarketexpress/html/front/personalCenter.html';
            },

            // 退出登录
            logout() {
                axios.get('/vegetablemarketexpress/user/logout', { withCredentials: true })
                    .then(response => {
                        if (response.data.code === 200) {
                            this.isLoggedIn = false;
                            this.userInfo = {};
                            this.showDropdown = false;
                            this.$message.success('退出登录成功');
                            setTimeout(() => this.goToLogin(), 1000);
                        } else {
                            this.$message.error('退出登录失败');
                        }
                    })
                    .catch(error => {
                        console.error('退出登录失败:', error);
                        this.$message.error('退出登录失败');
                    });
            },

            scrollToTop() {
                window.scrollTo({ top: 0, behavior: 'smooth' });
            },
            goToLogin() { window.location.href = 'login.html'; },
            goToCart() { window.location.href = 'cart.html'; },
            goToVegetables() { window.location.href = 'vegetables.html'; },
            goToDetail(id) { window.location.href = `detail.html?id=${id}`; },

            // 领取优惠券
            receiveCoupon(couponId) {
                axios.post('/api/coupon/receive', { couponId })
                    .then(res => {
                        this.$message.success('优惠券领取成功！');
                        this.couponList.forEach(coupon => {
                            if (coupon.id === couponId) coupon.received = true;
                        });
                    })
                    .catch(err => {
                        console.error('领取优惠券失败：', err);
                        this.$message.error('领取失败，请重试');
                    });
            },


            // 查看商品详情
            viewProductDetail(productId) {
                this.productDialogVisible = true;
                this.productDetailLoading = true;
                this.detailQuantity = 1;

                axios.get('/vegetablemarketexpress/product/getProductDetail?productId=' + productId)
                    .then(response => {
                        if (response.data && response.data.code === 200) {
                            this.currentProduct = response.data.data;
                        } else {
                            const errorMsg = (response.data && response.data.msg) || '获取商品详情失败';
                            this.$message.error(errorMsg);
                        }
                    })
                    .catch(error => {
                        console.error('获取商品详情失败:', error);
                        this.$message.error('网络错误，获取商品详情失败');
                    })
                    .finally(() => {
                        this.productDetailLoading = false;
                    });
            },

            // 增加详情页商品数量
            increaseDetailQuantity() {
                this.detailQuantity++;
            },

            // 减少详情页商品数量
            decreaseDetailQuantity() {
                if (this.detailQuantity > 1) {
                    this.detailQuantity--;
                }
            },



            // 格式化规格JSON
            formatSpecJson(specJson) {
                try {
                    const spec = JSON.parse(specJson);
                    let html = '<ul>';
                    for (let key in spec) {
                        html += `<li><strong>${key}:</strong> ${spec[key]}</li>`;
                    }
                    html += '</ul>';
                    return html;
                } catch (e) {
                    return '<p>规格信息格式错误</p>';
                }
            },
            // 修改添加到购物车的方法
// 添加到购物车
            addToCart(product) {
                // 核心：未登录时拦截，提示登录
                if (!this.isLoggedIn) {
                    this.$confirm('您尚未登录，是否前往登录？', '提示', {
                        confirmButtonText: '去登录',
                        cancelButtonText: '取消',
                        type: 'info',
                        closeOnClickModal: false // 点击弹窗外部不关闭，避免误操作
                    }).then(() => {
                        // 登录成功后返回当前页：记录当前页面URL作为redirect参数
                        const currentUrl = window.location.href;
                        // 跳转到登录页，并携带redirect参数（需编码特殊字符）
                        window.location.href = `/vegetablemarketexpress/html/front/login.html?redirect=${encodeURIComponent(currentUrl)}`;
                    }).catch(() => {
                        // 点击取消，不做操作
                        this.$message({ type: 'info', message: '已取消登录' });
                    });
                    return; // 终止后续添加购物车逻辑
                }
                const quantity = product.quantity || 1;

                // 构造购物车项数据
                const cartItem = {
                    productId: product.productId || product.id,
                    quantity: quantity,
                    price: product.price || product.promotionPrice
                };

                // 发送添加到购物车的请求 (修改路径为/cart/addToCart)
                axios.post('/vegetablemarketexpress/cart/addToCart', cartItem, {withCredentials: true})
                    .then(response => {
                        if (response.data && response.data.code === 200) {
                            this.$message.success(`${product.productName || product.name} 已添加到购物车`);
                            // 重新获取购物车数量
                            this.getCartCount();
                        } else {
                            const errorMsg = (response.data && response.data.msg) || '添加到购物车失败';
                            this.$message.error(errorMsg);
                        }
                    })
                    .catch(error => {
                        console.error('添加到购物车失败:', error);
                        this.$message.error('网络错误，添加到购物车失败');
                    });
            },

// 从详情页添加到购物车
            addToCartFromDetail() {
                if (!this.currentProduct) return;
// 核心：未登录时拦截，提示登录
                if (!this.isLoggedIn) {
                    this.$confirm('您尚未登录，是否前往登录？', '提示', {
                        confirmButtonText: '去登录',
                        cancelButtonText: '取消',
                        type: 'info',
                        closeOnClickModal: false
                    }).then(() => {
                        // 记录当前详情页URL（含商品ID参数），登录后返回
                        const currentUrl = window.location.href;
                        window.location.href = `/vegetablemarketexpress/html/front/login.html?redirect=${encodeURIComponent(currentUrl)}`;
                    }).catch(() => {
                        this.$message({ type: 'info', message: '已取消登录' });
                    });
                    return;
                }
                const cartItem = {
                    productId: this.currentProduct.productId,
                    quantity: this.detailQuantity,
                    price: this.currentProduct.price
                };

                // 发送添加到购物车的请求 (修改路径为/cart/addToCart)
                axios.post('/vegetablemarketexpress/cart/addToCart', cartItem, {withCredentials: true})
                    .then(response => {
                        if (response.data && response.data.code === 200) {
                            this.$message.success(`${this.currentProduct.productName} 已添加到购物车`);
                            this.productDialogVisible = false;
                            // 重新获取购物车数量
                            this.getCartCount();
                        } else {
                            const errorMsg = (response.data && response.data.msg) || '添加到购物车失败';
                            this.$message.error(errorMsg);
                        }
                    })
                    .catch(error => {
                        console.error('添加到购物车失败:', error);
                        this.$message.error('网络错误，添加到购物车失败');
                    });
            },

// 获取购物车商品数量
            getCartCount() {
                axios.get('/vegetablemarketexpress/cart/getCartDetails', {withCredentials: true})
                    .then(response => {
                        if (response.data && response.data.code === 200) {
                            const cartItems = response.data.data || [];
                            this.cartCount = cartItems.reduce((total, item) => total + (item.quantity || 0), 0);
                        }
                    })
                    .catch(error => {
                        console.error('获取购物车数量失败:', error);
                    });
            }



        }
    });
</script>
</body>
</html>
